<template>
  <el-dialog :title="`${data.subjectID ? '修改':'新增'}文章`" :visible.sync="show" width="340px" @closed='gaunbi' @open='open'>
    <el-form :model="date" :rules="rules" label-width="80px">
      <!-- <el-form-item label="标签名称">
        <el-select placeholder="请选择标签名称">
          <el-option v-model="date.subjectID" :value="date.subjectName"></el-option>
          <el-option v-model="date.subjectID" :value="date.subjectName"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="标签名称:" prop="subjectID">
        <el-select v-model="value" placeholder="请选择标签名称">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属目录" prop='videoURL'>
        <el-input v-model="date.subjectName"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="xiugaitijiao">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>

import { add, update } from '@/api/hmmm/tags'

// import { simple } from '@/api/hmmm/subjects'

export default {
  name: 'chacaoAdd',
  props: {
    data: {
      type: Object,
      default: function () {
        return {
          id: '',
          tagName: ''
        }
      }
    }
  },
  data () {
    return {
      show: false,
      date: {
        subjectID: '',
        tagName: ''
      },
      datq: {},
      rules: {
        tagName: [
          { required: true, message: '请输入目录', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      options: [{
        value: '12',
        label: 'h5'
      }, {
        value: '11',
        label: 'css3'
      }, {
        value: '10',
        label: 'bfc'
      }, {
        value: '9',
        label: 'Jquery'
      }, {
        value: '8',
        label: 'hadoop'
      }, {
        value: '7',
        label: 'mvvm'
      }, {
        value: '6',
        label: '语言2'
      }, {
        value: '4',
        label: '服务'
      }, {
        value: '3',
        label: '企业'
      }, {
        value: '2',
        label: 'mvc'
      }],
      value: ''
    }
  },
  methods: {

    // async getlist () {
    //   this.requestParams.subjectID = this.subject.id || null
    //   const { daa } = await list(this.requestParams)
    //   console.log(daa)
    //   // this.tags = data.items
    //   // this.total = data.counts
    // },
    open () {
      this.date = this.data
      console.log(this.date)
      this.date.id ? this.value = this.date.id + '' : this.value = ''
    },
    gaunbi () {
      this.date = this.datq
    },
    xiugaitijiao () {
      this.show = false
      console.log(this.date)
      return this.date.id ? this.xiugai() : this.tianjia()
    },
    // --------------------------------------------------------------------------------------
    xiugai () {
      console.log('修改')
      console.log(this.date)
      // 赋值
      // this.date.subjectID =
      // this.date.tagName =
      this.update(this.date)
    },
    async update (a) {
      try {
        await update(a)
        this.$message.success('修改成功')
        await this.$router.push('/subjects/tags')
      } catch (e) {
        console.log(e)
      }
    },
    // ======================================================================================
    tianjia () {
      // 打印data
      console.log('添加')
      // 赋值
      // this.date.subjectID =
      // this.date.tagName =
      console.log(this.date)
      // this.add(this.date)
    },
    async add (a) {
      try {
        await add(a)
        this.$message.success('添加成功')
        await this.$router.push('/subjects/tags')
      } catch (e) {
        console.log(e)
      }
    },
  },
  created () {
    // 请求简单数据列表
    // this.getlist()
  }
}
</script>
<style scoped lang='less'>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
